<template>
  <el-form>
    <el-row :gutter="24">
      <el-col :span="12">
        <div id="line-echarts_1" v-loading="echartloading" ref="lineRef" />
      </el-col>
      <el-col :span="12">
        <div id="line-echarts_2" v-loading="echartloading1" ref="lineRef_1"/>
      </el-col>
    </el-row>
  </el-form>
</template>

<script lang="ts" setup>
import * as echarts from 'echarts';
import { onMounted, reactive, ref } from 'vue';
import { getEcharts} from '@/api/antiJamPerformBoundaryCalculate';
const props = defineProps({
  echart_1_value: {
    type: Object,
    default: () => {
      return {};
    },
  },
  echart_2_value: {
    type: Object,
    default: () => {
      return {};
    },
  },
});
const lineRef = ref<any>(null);
const lineRef_1 = ref<any>(null);
const echartloading = ref<boolean>(false);
const echartloading1 = ref<boolean>(false);
const lineData_1 = ref<any>([]);
const lineData_2 = ref<any>([]);
onMounted(() => {
  initChart(lineRef);
  initChart(lineRef_1);
  if (Object.keys(props.echart_1_value).length!=0){
    lineData_1.value = props.echart_1_value
    showEcharts("line-echarts_1",lineData_1.value)
  }
  if (Object.keys(props.echart_2_value).length!=0){
    lineData_2.value = props.echart_2_value
    showEcharts("line-echarts_2",lineData_2.value)
  }
  
  
});

const initChart = (lineReftem:any) => {
  const myChart = echarts.init(lineReftem.value);
  myChart.setOption(optionConfig(), true);
};
const optionConfig = () => {
  const option = {
    tooltip: {
      trigger: 'axis',
    },
    grid: {
      left: '10%',
      right: '15%',
      bottom: '10%',
    },
    xAxis: {
      name: '推算边界',
      type: 'category',
      boundaryGap: true,
      data: ['1', '2', '3', '4', '5', '6','7','8','9','10'],
      axisTick: {
        // 刻度线控制在柱状图居中
        alignWithLabel: true,
      },
      nameTextStyle: {
        color: '#000',
      },
    },
    yAxis: {
      name: '评估指标',
      type: 'value',
      scale: true,
      nameTextStyle: {
        color: '#000',
        nameLocation: 'start',
      },
    },
    series: [
      {
        data: [0],
        type: 'line',
      },
    ],
  };
  return option;
};
//图数据获取
const showEcharts = async(str:any,echartData:any) =>{
  let OldmyChart = echarts.getInstanceByDom(document.getElementById(str) as HTMLElement);
  if (OldmyChart!=null&&OldmyChart!=undefined){
    OldmyChart.dispose()
  }
  const myChart = echarts.init(document.getElementById(str));
  myChart.setOption({
    animation:false,//渲染动画
    tooltip: {
      trigger: 'axis',
    },
    grid: {
      left: '10%',
      right: '15%',
      bottom: '10%',
    },
    xAxis: {
      name: '推算边界',
      type: 'category',
      data: echartData.category,//字段更新
      boundaryGap: true,
    },
    yAxis: {
      name: '评估指标',
      type: 'value',
    },
    series: [{
        data: echartData.values,
        type: 'line',
    }]
  })
};
</script>
<style lang="scss" scoped>
#line-echarts_1{
    width: 550px;
    height: 250px;
  }
#line-echarts_2{
  width: 550px;
  height: 250px;
}
</style>
